import React from 'react'
import Loadable from 'react-loadable'
// import '../App.css'

const MyLoadingComponent = ({ isLoading, error }) => {
  // Handle the loading state
  if (!isLoading) {
    return <div className="Myloading">Loading...</div>
  } else if (error) {
    return (
      <div className="Myloading">
        Sorry, there was a problem loading the page.
      </div>
    )
  } else {
    return null
  }
}
const AddExam = Loadable({
  loader: () => import('../pages/AddExam.jsx'),
  loading: MyLoadingComponent,
})
const EditExam = Loadable({
  loader: () => import('../pages/EditExam.jsx'),
  loading: MyLoadingComponent,
})
const PracticeManagement = Loadable({
  loader: () => import('../pages/PracticeManagement.jsx'),
  loading: MyLoadingComponent,
})
const SetExaminee = Loadable({
  loader: () => import('../pages/SetExaminee.jsx'),
  loading: MyLoadingComponent,
})
const SetReader = Loadable({
  loader: () => import('../pages/SetReader.jsx'),
  loading: MyLoadingComponent,
})
const ExamDetail = Loadable({
  loader: () => import('../pages/ExamDetail.jsx'),
  loading: MyLoadingComponent,
})


const routers = [
  {
    path: '/TmfsExam/PracticeManagement/AddExam',
    component: AddExam,
    key: 2,
  },
  {
    path: '/TmfsExam/PracticeManagement/EditExam',
    component: EditExam,
    key: 3,
  },
  {
    path: '/TmfsExam/PracticeManagement/SetExaminee',
    component: SetExaminee,
    key: 4,
  },
  {
    path: '/TmfsExam/PracticeManagement/SetReader',
    component: SetReader,
    key: 5,
  },
  {
    path: '/TmfsExam/PracticeManagement/ExamDetail',
    component: ExamDetail,
    key: 6,
  },
  {
    path: '/TmfsExam/PracticeManagement',
    component: PracticeManagement,
    key: 1,
  },

]

export default routers
